<template>
  <div class="text-center mb-3 font-bold text-lg">
    注册
  </div>
  <div class="ml-6 mr-6">
    <el-form :model="registerInfo" label-position="right" :rules="rules">
      <el-form-item label="账号/邮箱" prop="email">
        <el-input v-model="registerInfo.email"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="registerInfo.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input v-model="registerInfo.checkPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="float-left text-gray-400 hover:text-myRed-one" style="font-size: 10px">
          <input type="checkbox" />
          <span>点击表示您同意商城《服务协议》</span>
        </div>
        <div class="float-right text-gray-400 hover:text-myRed-one cursor-pointer" style="font-size: 10px" @click="goToLogin">登录</div>
      </el-form-item>
      <el-form-item class="text-center">
        <el-button type="danger" size="mini">注册</el-button>
      </el-form-item>
    </el-form>
    <div class="text-center mt-3" style="font-size: 10px">
      <span class="hover:text-myRed-one cursor-pointer" @click="goOtherWeb('https://hwawy.cn/')">Heaven's Blog</span>|
      <span class="hover:text-myRed-one cursor-pointer" @click="goToIndex">商城首页</span>|
      <span class="hover:text-myRed-one cursor-pointer">支付宝</span>|
      <span class="hover:text-myRed-one cursor-pointer" @click="goOtherWeb('https://www.kuaidi100.com/')">物流查询</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive, ref, Ref} from "vue";
import {useRouter} from "vue-router";
const $router = useRouter();
let registerInfo = reactive({email: '', password: '',checkPassword:''})
const validateRePass = (rule,value:string,callback) => {
  if ( value === ''){
    callback(new Error('请输入密码'))
  }else if ( value != registerInfo.password){
    console.log(value+registerInfo.password)
    callback(new Error("两次输入的密码不同"))
  }else {
    callback();
  }
}
const rules: object = reactive({
  email: [{
    required: true,
    message: '请输入邮箱',
    trigger: 'blur',
  }, {
    type: 'email',
    message: '邮箱格式不对'
  }],
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur',
  },
  checkPassword: [
    {validator: validateRePass,trigger: 'blur'}
  ]
})
function goToIndex() {
  $router.push({
    name: 'mobileIndex'
  })
}
function goOtherWeb(e:string){
  window.location.href = e
}
function goToLogin(){
  $router.push({
    name: 'mLogin'
  })
}
</script>

<style scoped>
:deep(.el-input .el-input__inner){
  height: 30px;
}
:deep(.el-form-item){
  margin-bottom: 10px
}
</style>